<template>
  <aplayer  class="songStatus"
  :music="song"
  :showlrc='true'
  theme="#BFB2D2"
  ref="audioPlayer"
  :list="Play"
  :controls="true"
  listmaxheight="1"
  @play="playAudio(true)"
  @pause="playAudio(false)"
  > 
  <div>
    {{ isOn }}
  </div>
  <!-- 用于触发组件更新 -->
  <div style="display: none;">{{ isOn }}</div>
</aplayer>
</template>
<script>
import aplayer from "vue-aplayer";
import { mapState } from "vuex";
export default {
  components: {
    aplayer,
  },
    data(){
      return {
      
      }
    },
    computed:{
      ...mapState({
        song:state => state.song,
        isOn:state => state.isOn,
        Play:state => state.Play,
      })
    },
    methods: {
    playAudio(flag){
      if(flag){//判断当前是暂停还是播放
        console.log("执行了播放");
    this.$store.commit("play",true)
      }else{
      this.$store.commit("play",false)
      console.log("执行了关闭");
      }
    }
  },
  updated(){
    if(this.$store.state.isOn){
    console.log("组件更新:播放");
    this.$refs.audioPlayer.play();
    }else{
      console.log("组件更新:暂停");
    this.$refs.audioPlayer.pause();
    }
  },
  mounted(){
    this.Play=this.Play
  }
}
</script>

<style lang="scss" scoped>

.songStatus{
  img { 
    margin: 1px;
    width: 37px;
    height: 37px;
  }
  p {
    margin: 0;
  }
}
</style>